<template>
	<view class="page-content pt20 c255">
		<image :src="vipBg" style="width: 100%;height: 100vh;position: fixed;top:0;z-index: 1;" mode="aspectFill"></image>
		<view style="position: relative;z-index: 2;">
		<u-navbar back-icon-color="#000" title=" " :background="background" :border-bottom="false" :is-back="true">
		</u-navbar>
		<view class="pl18">
			<swiper @change="handleTab" :current="tabCur" next-margin="20rpx" style="height: 340rpx;">
				<swiper-item v-for="(item,index) in gradeList" :key="index">
					<view class="module-level pr10">
						<image class="img"
							:src="item.backgroundUrl"
							mode="widthFix"></image>
						<view class="level-content" :class="'level-content'+tabCur">
							<view class="fz12 u-font-bold u-flex u-f-jsb mt10">
								<span></span>
								<span @click="toSign" class="btn-sign fz13 u-font-bold">{{signInfo.todaySignIn?'已签到':'签到'}}</span>
							</view>
							<view class="fz12 u-font-bold u-flex u-f-jsb mt12">
								会员积分{{userInfo.point}}
								<span>已连续签到{{signInfo.continuousDay}}天</span>
							</view>

							<view class="fz12 mt20" v-if="item.nextLevel">
								<view class="u-flex u-f-jsb mb4">
									{{item.name}}
									<span v-if="item.nextLevel">{{item.nextLevel.name}}</span>
								</view>
								<u-line-progress height="16" :show-percent="false" active-color="#6BB3D4"
									:percent="(item.currentExperience/item.nextLevel.experience*100)"></u-line-progress>
								<view class="fz12 mt2">还需消费{{item.nextLevel.experience-item.currentExperience}}元可升级至{{item.nextLevel.name}}</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>


		<view class="mt30 pl18 pr18 pb50">

			<view class="fz14 u-font-bold" style="position: relative;">
				<span class=""
					style="position: absolute;left: 50%;transform: translateX(-50%);top: -16rpx;color: #59722f;">会员权益</span>
				<image src="../../../static/image/ic-v-line.png"
					style="width: 472rpx;height: 2px;display: block;margin: 0 auto;"></image>
			</view>
			<view class="mt18 u-flex" style="flex-wrap: wrap;">
				<view class="mt24 item-eqity" v-for="(item, index) in benefitList" :key="index">

					<image :src="item.picUrl" mode="aspectFill" style="width: 80rpx;height: 80rpx;">
					</image>
					<view class="mt8">
						<view class="fz12" style="color:#59722f;">{{item.title}}</view>

					</view>

				</view>
			</view>
			<view class="u-flex u-f-justify mt20 fz11" @click="goArticleInfo(12)" style="color:#59722f;">
				会员权益说明
				<u-icon name="arrow-right" class="ml4 fz12"></u-icon>
			</view>

			<view class="brs8 mt30 p15" style="background: rgba(255,255,255,0.05);color:#59722f;">
				<view class="u-flex u-f-jsb" @click="toPoint()">
					<view class="fz14 u-font-bold" style="">积分获取</view>
					<view class="fz12">前往积分商城

						<u-icon name="arrow-right" class="ml4 fz12"></u-icon>
					</view>
				</view>
				<view class="fz12 mt10 lh21" v-if="gradeList[0]">
					<u-parse :html="gradeList[0].content"></u-parse>
<!-- 					① 每日签到得1积分，连签10天得10积分；</br>
					② 每日在社区中心完成评论得10积分；</br>
					③ 分享作品得20积分；</br>
					④ 每消费1元得20积分；</br>
					⑤ 积分商城抽奖获取。 -->
				</view>
			</view>
			<view class="mt20">
				<view class="fz12 u-font-bold" style="color:#59722f;">
					会员等级说明
				</view>
				<view class="fz12 mt14 lh21" v-if="gradeList[0]">
					<u-parse :html="gradeList[0].description"></u-parse>
<!-- 				普通会员：成功注册账号即成为普通会员。</br>
					银卡会员：累计消费6次且消费金额达到600元。</br>
					金卡会员：累计消费15次且消费金额达到1300元。</br>
					钻卡会员：累计消费15次且消费金额达到3880元。</br>
					黑卡会员：累计消费30次且消费金额达到8888元。 -->
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabCur: 0,
				isAgree: false,
				baseUrl: this.$config.apiBaseUrl,
				vipShu: this.$config.apiBaseUrl + 'static/wx/image/vip-sbg.png',
				isLogin: false,
				background: {
					background: ''
				},
				vipBg:{},
				member_type: [],
				gradeList: [],
				actionList: [{
					title: '购物积分',
					path: '',
					img: '../../../static/image/ic-v1.png'

				},],
				benefitList:[],
				signInfo:{},
				pointArticle:{},
				gradeArticle:{},
				userInfo: {}
			}
		},
		onLoad() {},
		onShow() {
			if (this.$db.get("userToken")) {
				this.initData()
			}
			
			this.$api.dictList({
				dictType: 'vip_bg'
			}, res => {
				if (res.code == 200) {
					this.vipBg = res.data[0].remark
				}
			})
		},

		methods: {
			initData(){
				
				this.$api.articleInfo({
					id:13
				}, res => {
					if (res.code == 200) {
						this.pointArticle = res.data
					}
				})
				this.$api.articleInfo({
					id:14
				}, res => {
					if (res.code == 200) {
						this.gradeArticle = res.data
					}
				})
				this.$api.memberLevel({}, res => {
					if (res.code == 200) {
						this.gradeList = [res.data]
						
						if(res.data.benefit){
							
							this.$api.articleList({
								categoryId:res.data.benefit,
								pageNo: 1,
								pageSize: 50
							}, res => {
								if (res.code==200) {
									this.benefitList= res.data.list
								}
							})
						}
					}
				})
				
				this.$api.memberInfo({}, res => {
					if (res.code == 200) {
						this.userInfo = res.data;
					}
				})
				this.$api.signSummary({}, res => {
					if (res.code == 200) {
						this.signInfo = res.data
					}
				})
				
			},
			toSign(){
				this.$api.signCreate({}, res => {
					if (res.code == 200) {
						this.pointArticle = res.data
						this.initData()
					}else{
						
					}
				})
			},
			
			toPoint() {
				uni.navigateTo({
					url: '/pages/point/index'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		// background: linear-gradient(135deg, #28302C 0%, #101514 100%);
		// min-height: 100vh;
	}

	.module-card {
		padding: 50rpx 0 42rpx;
		background: linear-gradient(90deg, #303145, #44495E);
		box-shadow: 0px 11px 62px 0px rgba(21, 21, 34, 0.67);
	}

	.btn-sign {
		background: #1d2e01;
		border-radius: 16rpx;
		padding: 10rpx 38rpx;
	}

	.module-level {
		position: relative;
		height: 340rpx;

		.img {
			display: block;
			width: 100%;
		}

		.level-content {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			padding: 25rpx 34rpx;
		}

		.level-content0 {
			color: #ffffff;
		}
	}

	.btn-open {
		width: 570rpx;
		line-height: 82rpx;
		text-align: center;
		color: #222231;
		border-radius: 50rpx;
		margin: 54rpx auto 0;
		background: linear-gradient(90deg, #ECBD83, #F8D9AD);

	}

	.shu-item {

		background-size: contain;
		height: 160rpx;
	}

	.item-ke {
		width: 300rpx;
		height: 72rpx;
		color: #222231;
		background: #F0E3CC;
		align-items: center;
		position: relative;
		justify-content: center;
		border-radius: 0 0 0 40rpx;
	}

	.item-ke1 {
		border-radius: 0 0 40rpx 0;
	}

	.kefu-btn {
		position: absolute;
		opacity: 0;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}

	.item-eqity {
		width: 33.33%;
		text-align: center;

	}
</style>